<template>
	<view class="">
		<view class="linear"></view>
		<view class="listbg">
			<!-- <view class="cancelbox">
				<text>{{getTitle(fromData.status,fromData.refund_type)}}</text>
				<text>{{getStatus(
				fromData.status,fromData.refund_type,
				fromData.fail_message,
				fromData.cancel_examine?
				fromData.cancel_examine:
				fromData.order.groupOrder.cancel_examine,
				fromData.task_status)}}</text>
			</view> -->
			<view class="cancelbox">
				<text>{{getTitle(fromData.status,fromData.refund_type)}}</text>
				<text>{{getStatus(
				fromData.status,fromData.refund_type,
				fromData.fail_message,
				fromData.cancel_examine?
				fromData.cancel_examine:
				kao(),
				fromData.task_status)}}</text>
			</view>
			<!-- <view class="" style="overflow: hidden;" v-show="false">
				<view class="addressbox topbox">
					<view class="add_l">
						<view class="qu">取</view>
						<text>|</text>
						<text>3.0KM</text>
						<text>|</text>
						<view class="">收</view>
					</view>
					<view class="add_r">
						<view class="">
							<text>重庆市南岸区弹子石国际社区T1-11 28弹子石菜市场</text>
							<image src="../static/icon_280@2x.png" mode=""></image>
						</view>
						<view class="">
							<text>重庆市南岸区弹子石国际社区T1-11 28弹子石菜市场</text>
							<image src="../static/icon_280@2x.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="pstime">
					<view class="lring"></view>
					<view class="rring"></view>
					<view class="time">
						预约配送时间:<text>2021.12.06 10:00-12:00</text>
					</view>
				</view>
			</view> -->


			<view class="" v-show="fromData.refundInfo.rider">
				<view class="usualtitle">
					<text>骑手信息</text>
				</view>
				<view class="buyer">
					<image :src="fromData.refundInfo.rider.avatar" mode=""></image>
					<view class="">
						<view class="">
							<text>{{fromData.refundInfo.rider.real_name}}</text>
						</view>
						<view class="">
							<text>{{fromData.refundInfo.rider.phone}}</text>
						</view>
					</view>
					<view class="call" @click="call(fromData.refundInfo.rider.phone)">联系骑手</view>
				</view>
			</view>


			<view class="" v-show="fromData.refundInfo.buyer">
				<view class="usualtitle">
					<text>买手信息</text>
				</view>
				<view class="buyer">
					<image :src="fromData.refundInfo.buyer.avatar" mode=""></image>
					<view class="">
						<view class="">
							<text>{{fromData.refundInfo.buyer.real_name}}</text>
							<text>{{fromData.refundInfo.buyer.phone}}</text>
						</view>
						<view class="">
							<text>{{fromData.refundInfo.market.mar_name}}</text>
							<text @click="call(fromData.refundInfo.buyer.phone)">联系买手</text>
						</view>
					</view>
				</view>
			</view>
			<template v-if="fromData.refundInfo">
				<view class="goodslist" style="padding-bottom: 30rpx;">
					<view class="usualtitle">
						<text>{{fromData.refundInfo.market.mar_name}}-{{fromData.refundInfo.merchant.mer_name}}</text>
					</view>
					<view class="goodsbg">
						<view class="" v-for="(item,index) in fromData.refundProduct">
							<image :src="item.product.SimpleCartInfo.image" mode=""></image>
							<view class="itemrules">
								<view class="">
									<text>{{item.product.SimpleCartInfo.store_name}}</text>
									<text>￥{{item.product.SimpleCartInfo.productAttr.ot_price || 0}}</text>
									<text>￥{{item.product.SimpleCartInfo.productAttr.price || 0}}</text>
								</view>
								<text style="color: red;">{{item.product.SimpleCartInfo.productAttr.sku}}</text>
								<text>x{{item.product.product_num || 0}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="goodslist" style="padding-bottom: 30rpx;">
					<template v-for="(item,index) in fromData.orderList">
						<view class="usualtitle">
							<text>{{item.merchantField.marketField.mar_name}}-{{item.merchantField.mer_name}}</text>
						</view>
						<view class="goodsbg">
							<view class="" v-for="(i,e) in item.simpleOrderProduct">
								<image :src="i.simpleCartInfo.image" mode=""></image>
								<view class="itemrules">
									<view class="">
										<text>{{i.simpleCartInfo.store_name}}</text>
										<text>￥{{i.simpleCartInfo.price || 0}}</text>
										<text>￥{{i.product_price || 0}}</text>
									</view>
									<text style="color: red;">{{i.simpleCartInfo.productAttr.sku}}</text>
									<text>x{{i.product_num || 0}}</text>
								</view>
							</view>
						</view>
						<view class="" v-show="item.mark">
							<view class="usualtitle">
								<text>备注</text>
							</view>
							<view class="beizu">
								<view class=""><text>{{item.mark}}</text></view>
							</view>
						</view>
					</template>
					<view class="openline"><text>共{{fromData.total_num || 0}}件</text>
						<image src="./static/icon_297@2x.png" mode=""></image>
						<image src="./static/icon_298@2x(1).png" mode=""></image>
					</view>

					<view class="youhui">
						<view class="">
							<image src="./static/icon_138@2x.png" mode=""></image>
							<text>积分抵现</text>
						</view>
						<text>-￥{{fromData.integral_price || 0}}</text>
					</view>
					<view class="youhui">
						<view class="">
							<image src="./static/icon_139@2x.png" mode=""></image>
							<text>红包</text>
						</view>
						<text>-￥{{fromData.total_free_money_sum || 0}}</text>
					</view>
					<view class="youhui">
						<view class="">
							<image src="./static/icon_139@2x.png" mode=""></image>
							<text>礼品卡</text>
						</view>
						<text>-￥{{fromData.card_price || 0}}</text>
					</view>
					<view class="youhui">
						<view class="">
							<image src="./static/icon_139@2x.png" mode=""></image>
							<text>配送费红包</text>
						</view>
						<text>-￥{{fromData.total_free_postage_money_sum || 0}}</text>
					</view>
					<view class="youhui">
						<view class="">
							<image src="./static/icon_141@2x.png" mode=""></image>
							<text>优惠券</text>
						</view>
						<text>-￥{{fromData.coupon_price || 0}}</text>
					</view>
					<view class="realpay">
						<view class="" style="align-items: center;">已优惠<text>
								￥{{fromData.total_free_money_sum || 0}}</text></view>
						<view class="">实付金额￥<text>{{fromData.pay_price || 0}}</text></view>
					</view>
					<view class="plus">
						<image src="./static/icon_148@2x.png" mode=""></image>
						<view class="">
							<image src="./static/vip.png" mode=""></image>
							<text> 尊贵的plus会员</text>
							<text> | 可为您节省￥{{fromData.order_total_vip_price || 0}}</text>
						</view>
					</view>
				</view>
			</template>



			<view class="">
				<view class="usualtitle">
					<text>配送信息</text>
				</view>
				<view class="beizu peisong">
					<view class="">
						<text>收货地址:</text>
						<text style="color: #333333;">
							{{fromData.order.groupOrder.real_name || fromData.real_name}}{{fromData.order.groupOrder.user_phone || fromData.user_phone}}{{fromData.order.groupOrder.user_address || fromData.user_address}}
						</text>
					</view>
					<view class="">
						<text>配送时间:</text>
						<text>{{fromData.order.groupOrder.delivery_day || fromData.delivery_day}}
							{{fromData.order.groupOrder.delivery_time_scope || fromData.delivery_time_scope}}</text>
					</view>

				</view>
			</view>
			<view class="" v-show="fromData.refund_message" style="overflow: hidden;">
				<view class="usualtitle">
					<text>申请原因</text>
				</view>
				<view class="imgs txtxt">
					{{fromData.refund_message || fromData.mark || ''}}
				</view>
			</view>
			<view class="" v-show="fromData.images">
				<view class="usualtitle">
					<text>申请凭证</text>
				</view>
				<view class="imgs">
					<template v-for="(item,index) in fromData.images">
						<image :src="item" mode="" @click="prew(item,fromData.images)"></image>
					</template>
				</view>
			</view>

			<view class="">
				<view class="usualtitle">
					<text>订单信息</text>
				</view>
				
				<view class="beizu">
					<view class="">
						<text>用户姓名: {{fromData.order.groupOrder.real_name ||fromData.real_name }}</text>
						<text></text>
					</view>
					<view class="">
						<text>用户电话: {{fromData.order.groupOrder.user_phone || fromData.user_phone}}</text>
						<text @click="call(fromData.order.groupOrder.user_phone || fromData.user_phone)">拨打</text>
					</view>
					
					<view class="">
						<text>订单编号: {{fromData.order.order_sn || fromData.group_order_sn}}</text>
						<text>复制</text>
					</view>
					<view class=""><text>下单时间: {{fromData.order.create_time || fromData.create_time}}</text></view>

				</view>
			</view>

		</view>
		<view class="" style="height: 200rpx;"></view>
		<!-- 退款 -->
		<view class="recive tworecive"
			v-if="fromData.status == 0 && (fromData.refund_type == 1 || fromData.refund_type == 2)">
			<view class="" @click="refuse(fromData)">拒绝退款</view>
			<view class="" @click="agree(fromData)">同意退款</view>
		</view>
		<!-- 	<view class="recive tworecive"
			v-if="fromData.status == 0 &&  fromData.refund_type == 3">
			<view class="" @click="sure(fromData,2)">拒绝申请</view>
			<view class="" @click="sure(fromData,1)">同意申请</view>
		</view> -->
		<!-- 换货单审核 -->
		<view class="recive tworecive" v-if="fromData.status == 0 &&  fromData.refund_type == 3">
			<view class="" @click.stop="refuse(fromData)">拒绝申请</view>
			<view class="" @click.stop="agree(fromData)">同意申请</view>
		</view>

		<!-- 取消订单审核 -->
		<view class="recive tworecive"
			v-if="fromData.task_status == 6 && fromData.paid == 1 && fromData.cancel_examine == 1">
			<view class="" @click.stop="payCancelGroupOrder(0)">拒绝申请</view>
			<view class="" @click.stop="payCancelGroupOrder(1)">同意申请</view>
		</view>



		<view class="recive" v-if=" fromData.status == 2">
			<view class="" @click="agree(fromData)">输入退款金额</view>
		</view>



		<u-popup :show="moneyshow" mode="center" :safeAreaInsetBottom='fasle' round='16rpx'>
			<view class="ipts">
				<template v-if="agree_.refund_type != 3">
					<text>是否同意用户的退款申请？</text>
					<textarea type="text" v-model="realprice" placeholder="输入退款金额" />
				</template>
				<template v-else>
					<text>是否同意用户的换货申请？</text>
					<textarea placeholder="无需填写退款金额"></textarea>
				</template>
				<view class="playbtn">
					<view @click="cancelss">取消</view>
					<view @click="sure(fromData,1)">确认</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="moneyshow2" mode="center" :safeAreaInsetBottom2='fasle' round='16rpx'>
			<view class="ipts">
				<text>是否拒绝用户的退款申请？</text>
				<textarea type="text" v-model="reason" placeholder="输入拒绝原因" />
				<view class="playbtn">
					<view @click="cancelss">取消</view>
					<view @click="sure(fromData,2)">确认</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import {
		examineCancelPayApi
	} from '@/api/marService.js'
	export default {
		data() {
			return {
				moneyshow: false,
				moneyshow2: false,
				realprice: '',
				reason: '',
				fromData: "",
				id: "",
				type: '',
				status: '',
				agree_: {}
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id;
				this.type = e.type;
				this.status = e.status;
				this.task_status = e.task_status;
			}
			//获取详情
			this.getDetail();
		},
		onShow() {},
		methods: {
          kao(){
			  if(this.fromData.order instanceof Object && this.fromData.order.groupOrder instanceof Object){
				  return this.fromData.order.groupOrder.cancel_examine
			  }
			  return null;
		  },
			payCancelGroupOrder(type) {
				uni.showLoading({
					mask: true
				})
				let group_order_id = this.fromData.group_order_id
				examineCancelPayApi(group_order_id, type).then(res => {
					if (res.status == 200) {
						uni.hideLoading()
						this.getDetail();
					}
				})

			},

			prew(e, arr) {
				uni.previewImage({
					current: e,
					urls: arr
				})
			},
			getrealprice() {
				this.moneyshow = true
			},
			// 拨打电话
			call(num) {
				uni.makePhoneCall({
					phoneNumber: String(num),
					success() {

					},
					fail(res) {
						console.log(res);
					}
				})
			},
			cancelss() {
				this.moneyshow = false
				this.moneyshow2 = false
			},
			sure(data, status) {
				if (status == 1 && !this.realprice && this.fromData.refund_type < 3) {
					return uni.showToast({
						title: '请输入退款金额',
						icon: 'none'
					})
				}
				if (status == 1 && this.realprice > this.fromData.refund_price && this.fromData.refund_type < 3) {
					return uni.showToast({
						title: '输入的退款金额不得大于订单的支付金额',
						icon: 'none'
					})
				}
				if (status == 2 && !this.reason) {
					return uni.showToast({
						title: '请输入拒绝原因',
						icon: 'none'
					})
				}
				this.moneyshow = false
				this.moneyshow2 = false
				uni.showLoading({
					mask: true
				})
				this.$request(`mar_service/switchStatus/${data.refund_order_id}`, {
					status: status,
					fail_message: this.reason,
					refund_price: this.realprice,
					serviceLogin: '111',
				}, 'POST').then(res => {

					if (res.status == 200) {
						uni.showToast({
							title: '审核成功',
							icon: 'none'
						})
						this.getDetail()

					}
					// return uni.setNavigationBarTitle({
					// 	title: "售后详情"
					// });
				})

			},
			//同意申请
			agree(data) {
				this.agree_ = data
				this.moneyshow = true
				this.realprice = data.refund_price
			},
			//拒绝申请
			refuse(data) {
				console.log(222)
				this.moneyshow2 = true
			},
			//售后状态
			getTitle(status, type) {
				let refund_type = ''
				// let refund_type = type == 1 ? '退款' : (type == 2 ? '退款退货' : (type == 3 ? '换货' : '已取消'))
				switch (type) {
					case 1:
						refund_type = '退款'
						break;
					case 2:
						refund_type = '退款退货'
						break;
					case 3:
						refund_type = '换货'
						break;
					default:
						refund_type = '已取消'
				}

				if (type == 4) {
					return refund_type + "-处理成功"
				}
				switch (Number(status)) {
					case 1:
						return '处理中-' + refund_type;
					case 2:
						return '处理中-' + refund_type;
					case 3:
						return '已处理-' + refund_type + '成功';
					case -1:
						return '已处理-' + refund_type + '失败';
					case 0:
						return '待处理-' + refund_type;
					default:
						return '已取消';
				}

			},
			/**
			 * @param {Object} status			审核状态 0:待审核 -1:审核未通过 1:待退货 2:待收货 3:已退款	
			 * @param {Object} type				refund_type  退款类型 1退款 2退货退款  3换货 4已支付订单取消
			 * @param {Object} reason			fail_message  退款理由
			 * @param {Object} cancel			cancel_examine  客服审核退货 0未申请 1申请中  2审核通过  3未通过
			 * @param {Object} task_status
			 */
			getStatus(status, type, reason, cancel, task_status) {
				console.log({
					status,
					type,
					reason,
					cancel,
					task_status
				})
				if (cancel) {
					if (cancel == 1) {
						return '待审核'
					} else if (cancel == 2) {
						return '审核通过'
					} else {
						return '审核未通过'
					}
				}

				if (type == 4 || task_status == 6) {
					return cancel == 1 ? '待审核' : (cancel == 2 ? '审核成功' : '审核失败') + '-取消订单'
				}
				let refund_type = type == 1 ? '退款' : (type == 2 ? '退款退货' : '换货')
				console.log(type)
				switch (Number(status)) {
					case 1:
						return '客服已同意申请，等待客户退货';
					case 2:
						return '骑手已完成送货，请尽快退款给客户';
					case 3:
						let info = type == 3 ? '' : '，钱款将由微信企业账户于3个工作日打款到客户的微信零钱';
						return '客户的' + refund_type + '成功' + info;
					case -1:
						return '客户的' + refund_type + '失败，' + reason;
					case 0:
						return '客户正在申请' + refund_type + '，请尽快处理';
					default:
						return '未在支付时间内完成支付，订单自动取消';
				}

			},
			//获取详情
			getDetail() {
				// let url = this.status == 1 ? (this.task_status == 6 ?  'mar_service/refundDetail' :'mar_service/urge/detail')
				//  : 'mar_service/refundDetail';
				let url = this.status == 1 ? 'mar_service/urge/detail' : 'mar_service/refundDetail'
				this.$request(`${url}/${this.id}`, {
					serviceLogin: '111',
				}, 'GET').then(res => {
					console.log(res, '详情res');
					if (res.status == 200) {
						this.fromData = res.data;
						console.log('status:' + this.fromData.status, 'task_status:' + this.fromData.task_status,
							'type:' + this.type)

					}
					return uni.setNavigationBarTitle({
						title: "售后详情"
					});
				})
			},


		}
	}
</script>

<style>
	.u-popup__content {
		background-color: transparent !important;
	}

	.txtxt {
		box-sizing: border-box;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.imgs {
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 0;
	}

	.imgs>image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin-left: 20rpx;
		/* background: #18BC37; */
		margin-bottom: 20rpx;
	}

	.imgs>image:nth-of-type(3n+1) {
		margin-left: 0;
	}

	.pstime {
		height: 84rpx;
		width: 100%;
		/* overflow: hidden; */
		/* margin-left: 30rpx; */
		position: relative;
	}

	.pstime .lring {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background: #F5F5F5;
		position: absolute;
		left: -14rpx;
		top: -14rpx;
	}

	.pstime .rring {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background: #F5F5F5;
		position: absolute;
		right: -14rpx;
		top: -14rpx;
	}

	.pstime .time {
		border-top: 1rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		width: 630rpx;
		height: 100%;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		margin-left: 30rpx;
	}

	.pstime .time text {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #F45E14;
	}

	.topbox {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.qu {
		color: #F45E14 !important;
		background: #FFE8DC !important;
	}

	.addressbox {
		display: flex;
		width: 690rpx;
		margin-left: 20rpx;
		overflow: hidden;
	}

	.add_r {
		flex: 1;
		margin-left: 12rpx;
	}

	.add_r>view {
		display: flex;
	}

	.add_r>view:nth-of-type(2) {
		margin-top: 30rpx;
	}

	.add_r>view text {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		width: 480rpx;
	}

	.add_r>view image {
		width: 36rpx;
		height: 36rpx;
		margin-left: 50rpx;
	}

	.add_l {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 8rpx;
	}

	.add_l>view {
		width: 44rpx;
		height: 26rpx;
		background: #D6FFF5;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #109C7A;
	}

	.add_l>text {
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
	}

	.topbox {
		box-sizing: border-box;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.cancelbox {
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		box-sizing: border-box;
		width: 690rpx;
		padding: 30rpx;
		position: relative;
		z-index: 5;
	}

	.cancelbox text:nth-of-type(1) {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.call {
		width: 124rpx !important;
		height: 44rpx;
		background: #FFFFFF;
		border: 1rpx solid #EEEEEE;
		border-radius: 22rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		position: absolute;
		right: 30rpx;
	}

	.loc {
		display: flex;
		align-items: center;
	}

	.loc text {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F45E14;
		margin-left: 8rpx;
	}

	.plus {
		width: 630rpx;
		height: 88rpx;
		position: relative;
		margin-left: 30rpx;
		margin-top: 6rpx;
		display: flex;
		align-items: flex-end;
	}

	.plus>view {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #4D2F12;
		position: relative;
		z-index: 2;
		margin-bottom: 20rpx;
		margin-left: 14rpx;
	}

	.plus>view image {
		width: 30rpx;
		height: 30rpx;
	}

	.plus>view text {
		margin-left: 6rpx;
	}

	.plus>view text:nth-of-type(1) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #4D2F12;
	}

	/* 	<view class="plus">
		<image src="../static/icon_148@2x.png" mode=""></image>
			<view class="">
				<image src="../static/vip.png" mode=""></image>
				<text>成为plus会员</text>
				<text>| 可为您节省￥15.08</text>
			</view>
	</view> */

	.plus>image {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.realpay {
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 60rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.realpay>view {
		display: flex;
		align-items: baseline;
	}

	.realpay>view:nth-of-type(1) text {
		font-size: 34rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F83535;
	}

	.realpay>view:nth-of-type(2) text {
		font-size: 40rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.youhui {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 40rpx;

	}

	.youhui>view {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.youhui>view image {
		width: 28rpx;
		height: 30rpx;
		margin-right: 14rpx;
	}

	.youhui>text {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F83535;
	}

	.openline {
		width: 630rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
		background: #FAFAFA;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}

	.openline>image {
		width: 16rpx;
		height: 10rpx;
	}

	.goodsbg>view {
		height: 170rpx;
		border-bottom: 1rpx solid #EEEEEE;
		width: 630rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.priceipt {
		position: absolute;
		width: 174rpx;
		height: 50rpx;
		background: #FFFFFF;
		border: 1rpx solid #FFCBB1;
		border-radius: 25rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F45E14;
		right: 0rpx;
		bottom: 10rpx;
	}

	.goodsbg>view:last-child {
		border-bottom: none;
	}

	.goodsbg>view>image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 12rpx;
		margin-right: 16rpx;
	}

	.itemrules {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.itemrules>text {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 30rpx;
	}

	.itemrules>view {
		display: flex;
		align-items: center;
	}

	.itemrules>view>text:nth-of-type(1) {
		width: 280rpx;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}

	.itemrules>view>text:nth-of-type(2) {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		text-decoration: line-through;
		color: #999999;
		line-height: 6rpx;
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.itemrules>view>text:nth-of-type(3) {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.itemrules {}

	/* 	<view class="">
		<image src="" mode=""></image>
		<view class="itemrules">
			<view class=""><text>饱满海南香蕉饱满海南香蕉</text><text>￥18.0</text><text>￥18.0</text></view>
			<text>香甜软糯，回味无穷，一口爱上</text>
			<text>x1</text>
		</view>
	</view> */

	.recive {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		z-index: 99;
		background: linear-gradient(64deg, #2BCCA5, #22B591);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
	}

	.beizu {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
		padding: 30rpx;
		line-height: 40rpx;
	}

	.beizu>view {
		display: flex;
		justify-content: space-between;
			margin-top: 16rpx;
	}

	.beizu>view text:nth-of-type(2) {
		color: #FC9448;
	}

	.beizu>view:nth-of-type(2) {
		margin-top: 16rpx;
	}

	.peisong {}

	.peisong>view text:nth-of-type(2) {
		color: #FC9448;
		width: 500rpx;
	}

	.buyer {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx;
		position: relative;
	}

	.buyer>image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		/* background: #18BC37; */
		margin-right: 16rpx;
	}

	.buyer>view {
		flex: 1;
	}

	.buyer>view>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.buyer>view>view:nth-of-type(1) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
	}

	.buyer>view>view:nth-of-type(2) {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
	}

	.buyer>view>view:nth-of-type(2) text:nth-of-type(2) {
		color: #F83535;
	}

	.usualtitle {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.usualtitle text:nth-of-type(2) {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F45E14;

	}

	.user {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.user>view {
		display: flex;
	}

	.user text:nth-of-type(1) {
		width: 140rpx;
		white-space: nowrap;
	}

	.hong {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #F83535;
	}

	.hui {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #666666;
		width: 500rpx;
	}

	.listbg {
		width: 690rpx;
		margin-left: 30rpx;
		position: relative;
		z-index: 3;
		padding-top: 50rpx;
	}

	.listbg>view {
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	page {
		background: #F5F5F5;
	}

	.ipts {
		width: 620rpx;
		height: 380rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	.linear {
		width: 750rpx;
		height: 280rpx;
		background: linear-gradient(180deg, #109C7A 0%, #F5F5F5 100%);
		position: fixed;
		top: 0;
	}

	.ipts>text {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		line-height: 34rpx;
	}

	.ipts input {
		width: 572rpx;
		height: 120rpx;
		background: #FFFFFF;
		border: 1rpx solid #CCCCCC;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding-left: 16rpx;
		margin-bottom: 42rpx;
		margin-top: 46rpx;
	}

	.ipts textarea {
		width: 572rpx;
		height: 120rpx;
		background: #FFFFFF;
		border: 1rpx solid #CCCCCC;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding-left: 16rpx;
		margin-bottom: 42rpx;
		margin-top: 46rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		padding-top: 10rpx;
	}

	.playbtn {
		width: 100%;
		display: flex;
		height: 90rpx;
		border-top: 1rpx solid #EEEEEE;
	}

	.playbtn>view {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #999999;
		display: flex;
		width: 50%;
		height: 100%;
		align-items: center;
		justify-content: center;
	}

	.playbtn>view:nth-of-type(2) {
		border-left: 1rpx solid #EEEEEE;
		color: #F31E1E;

	}

	.tworecive {
		background: #FFFFFF;
		display: flex;
		justify-content: flex-end;
		box-sizing: border-box;
		height: 140rpx;
		padding-right: 60rpx;
	}

	.tworecive>view {
		width: 220rpx;
		height: 90rpx;
		background: #FFFFFF;
		border: 1rpx solid #CCCCCC;
		border-radius: 10rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.tworecive>view:nth-of-type(2) {
		color: #FFFFFF;
		width: 220rpx;
		background: linear-gradient(64deg, #2BCCA5, #22B591);
		margin-left: 30rpx;
	}
</style>
